JavaScript Nullish Coalescing: Mestring av standardverditilordning

JavaScript-utviklere må ofte tilordne standardverdier når en variabel er null eller udefinert. Før ES2020 var den logiske ELLER-operatoren (||) den primære metoden for å oppnå dette. Innføringen av nullish coalescing-operatoren (??) gir imidlertid en mer presis og pålitelig løsning. Denne omfattende guiden utforsker nyansene i nullish coalescing, dens fordeler og praktiske eksempler for å hjelpe deg med å mestre denne kraftige funksjonen.

Forstå Nullish Coalescing (??)

Nullish coalescing-operatoren (??) er en logisk operator som returnerer sin høyre operand når dens venstre operand er null eller undefined. Ellers returnerer den sin venstre operand.

Syntaks:

            leftOperand ?? rightOperand
            

              
                Copy
              
            
          

Hovedforskjell fra logisk ELLER (||):

Den logiske ELLER-operatoren (||) returnerer den høyre operanden hvis den venstre operanden er en hvilken som helst falsy-verdi (null, undefined, 0, '', NaN, false). Dette kan føre til uventet oppførsel når du kun har til hensikt å håndtere null- eller undefined-verdier.

Hvorfor bruke Nullish Coalescing?

Nullish coalescing gir flere fordeler fremfor den tradisjonelle logiske ELLER-operatoren:

• Presisjon: Den retter seg spesifikt mot null og undefined, og unngår utilsiktede standardtilordninger for andre falsy-verdier.
• Lesbarhet: Den kommuniserer tydelig intensjonen om å kun håndtere null- eller undefined-tilfeller, noe som forbedrer kodens vedlikeholdbarhet.
• Sikkerhet: Den forhindrer uventet oppførsel forårsaket av at falsy-verdier utilsiktet utløser standardtilordninger.

Praktiske eksempler

1. Grunnleggende tilordning av standardverdi

Tilordne en standardverdi til en variabel hvis den er null eller undefined:

            const userName = user.name ?? 'Guest';
console.log(userName); // Output: 'Guest' if user.name is null or undefined, otherwise the actual username
            

              
                Copy
              
            
          

2. Håndtering av API-svar

Hente data fra et API og gi en standardverdi hvis svaret mangler en spesifikk egenskap:

            const apiResponse = {
  data: {
    city: null,
  },
};

const cityName = apiResponse.data.city ?? 'Unknown City';
console.log(cityName); // Output: 'Unknown City'
            

              
                Copy
              
            
          

3. Standardkonfigurasjoner

Sette standardkonfigurasjonsalternativer for en komponent eller modul:

            const config = {
  theme: userSettings.theme,
  animationSpeed: userSettings.animationSpeed ?? 'normal',
};

console.log(config.animationSpeed); // Output: 'normal' if userSettings.animationSpeed is null or undefined
            

              
                Copy
              
            
          

4. Håndtering av brukerpreferanser

Tillate brukere å tilpasse innstillinger og gi standardverdier hvis de ikke har spesifisert en preferanse:

            let userVolume = localStorage.getItem('volume'); //might return null
let volume = userVolume ?? 0.5; // set a default volume of 0.5

console.log(`User volume is ${volume}`);
            

              
                Copy
              
            
          

5. Kjede sammen Nullish Coalescing

Du kan kjede sammen nullish coalescing-operatoren for å gi en kaskade av standardverdier:

            const setting = userSetting.displaySetting.theme ?? defaultSettings.theme ?? 'light';
console.log(setting); // Output: The first non-null/undefined value from the chain
            

              
                Copy
              
            
          

6. Arbeid med funksjoner

Tilordne en standardfunksjon hvis den gitte funksjonen er null eller udefinert:

            const logMessage = logger.log ?? (() => console.log('No logger available.'));
logMessage('This is a test message.');
            

              
                Copy
              
            
          

Nullish Coalescing med Optional Chaining

Nullish coalescing-operatoren passer perfekt sammen med optional chaining (?.), noe som lar deg trygt få tilgang til nestede egenskaper uten å forårsake feil hvis en mellomliggende egenskap er null eller undefined.

Eksempel:

            const user = {
  profile: {
    address: {
      city: null,
    },
  },
};

const cityName = user?.profile?.address?.city ?? 'Unknown City';
console.log(cityName); // Output: 'Unknown City'
            

              
                Copy
              
            
          

I dette eksempelet, hvis noen av egenskapene (user, profile, address eller city) er null eller undefined, vil optional chaining kortslutte, og nullish coalescing-operatoren vil returnere standardverdien 'Unknown City'.

Vanlige bruksområder i globale applikasjoner

Vurder disse internasjonale scenarioene der nullish coalescing kan være spesielt nyttig:

• Lokalisering: Tilby standardoversettelser basert på brukerens lokasjon. Hvis en oversettelse ikke er tilgjengelig for et spesifikt språk, kan en reserve til et standardspråk (f.eks. engelsk) implementeres.
• Valutaformatering: Vise valutaverdier med passende formatering basert på brukerens region. Hvis de regionale innstillingene ikke er tilgjengelige, kan et standard valutaformat brukes.
• Dato- og tidsformatering: Formatere datoer og klokkeslett i henhold til brukerens lokasjon. Hvis lokasjonsinformasjonen mangler, kan et standard dato- og tidsformat brukes.
• Adresseformatering: Vise adresseinformasjon i riktig format for forskjellige land. Hvis landet ikke er spesifisert, kan et standard adresseformat brukes.

Eksempel: Lokalisering som reserve

            const translatedText = localizedStrings[userLocale]?.greeting ?? localizedStrings['en-US'].greeting ?? "Hello!";
console.log(translatedText);
            

              
                Copy
              
            
          

Beste praksis

• Bruk ?? for null/undefined-sjekker: Foretrekk ?? fremfor || når du spesifikt vil håndtere null- eller undefined-verdier.
• Kombiner med optional chaining: Bruk ?? i forbindelse med optional chaining (?.) for å trygt få tilgang til nestede egenskaper.
• Unngå unødvendig kompleksitet: Hold koden din ren og lesbar ved å kun bruke ?? når det gir en klar fordel.
• Vurder nettleserkompatibilitet: Sørg for at målgruppenettleserne dine støtter nullish coalescing-operatoren (ES2020). Hvis du trenger å støtte eldre nettlesere, bruk en transpiler som Babel.
• Kodegjennomganger: Oppfordre til kodegjennomganger for å sikre korrekt bruk av nullish coalescing-operatoren, spesielt i store internasjonale prosjekter der feiltolkninger av falsy-verdier kan ha betydelige konsekvenser.

Nettleserkompatibilitet

Nullish coalescing-operatoren er en relativt ny funksjon i JavaScript (ES2020). Sørg for at målgruppenettleserne dine støtter den, eller bruk en transpiler som Babel for å gi kompatibilitet for eldre nettlesere. Vurder bruksdemografien for applikasjonen din. For eksempel kan et prosjekt rettet mot brukere i land med langsommere teknologiadopsjon kreve transpilerering i større grad enn et som er rettet mot brukere i teknologisk avanserte regioner.

Fallgruver å unngå

• Blanding av ?? og || med &&: Når du kombinerer nullish coalescing-operatoren (??) eller den logiske ELLER-operatoren (||) med den logiske OG-operatoren (&&) uten eksplisitte parenteser, kaster JavaScript en syntaksfeil. Bruk alltid parenteser for å tydeliggjøre rekkefølgen på operasjonene.
• Forveksling av ?? med ||: Husk den avgjørende forskjellen: ?? sjekker kun for null og undefined, mens || sjekker for enhver falsy-verdi.

Eksempel på fallgruve 1 (syntaksfeil):

            // This will throw a SyntaxError:
// const value = a ?? b && c;

// Correct way (using parentheses):
const value = a ?? (b && c);
const value2 = (a ?? b) && c;
            

              
                Copy
              
            
          

Alternativer til Nullish Coalescing (for eldre nettlesere)

Hvis du trenger å støtte eldre nettlesere som ikke støtter nullish coalescing-operatoren, kan du bruke følgende alternativer:

• Logisk ELLER-operator (||): Som nevnt tidligere, er dette den tradisjonelle tilnærmingen. Vær imidlertid oppmerksom på problemet med falsy-verdier.
• Ternær operator: En mer detaljert, men eksplisitt måte å sjekke for null eller undefined.

Eksempel: Ternær operator

            const value = a === null || a === undefined ? defaultValue : a;
            

              
                Copy
              
            
          

Konklusjon

Nullish coalescing-operatoren (??) er et verdifullt tillegg til JavaScript-språket, og gir en mer presis og lesbar måte å håndtere tilordning av standardverdier når man arbeider med null- eller undefined-verdier. Ved å forstå dens fordeler og nyanser, kan du skrive renere, sikrere og mer vedlikeholdbar kode. Å kombinere den med optional chaining forbedrer ytterligere din evne til å håndtere komplekse datastrukturer på en elegant måte. Når du bygger applikasjoner for et globalt publikum, bør du vurdere implikasjonene av null- og undefined-verdier i ulike kulturelle og regionale sammenhenger, og utnytte nullish coalescing for å gi en konsistent og brukervennlig opplevelse for alle.